<template>
	<view class="content">
		<image class="bg-img" src="../../static/index/img3.jpg"></image>
		<view class="avatarWrapper">
			<view class="avatar">
				<image class="img" src="../../static/index/avatar1.jpeg" mode="widthFix"></image>
			</view>
		</view>
		<view class="form">
			<form ref="from" :modelValue="loginData">
				<view class="inputWrapper">
					<input class="input" type="text" name="userame" v-model="loginData.userName" placeholder="请输入学号" />
				</view>
				<view class="inputWrapper">
					<input class="input" type="password" name="password" v-model="loginData.password"
						placeholder="请输入密码" />
				</view>
				<view>
					<button class="btnValue" @click="submitForm()" type="primary" >登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
				</view>
				<view>
					<navigator url="/pages/TeLogin/AuLogin">
						<button class="loginReg">注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
					</navigator>
				</view>
			</form>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				loginData: {
					userName: '',
					password: ''
				},
			};
		},
		methods:{
			submitForm(formName){
				let msg = '';
				if(!this.loginData.password){
					 msg ='请输入密码';
				}
				if(!this.loginData.userName){
					msg ='请输入学号';
				}
				if(!msg){
					uni.request({
						url:'http://localhost:5000/users/token',
						data:this.loginData,
						method:"POST",
						success: (res) => {
							if(res.data.code == 1000){
								uni.setStorage({
									key:'token',
									data:res.data.data,
									success:function() {
										uni.switchTab({
											url:'/pages/index/index'
										});
									}
								});
							}else{
								uni.showToast({
									title:res.data.msg,
									icon:"error",
                                    duration:2000
								})
							}
						}
					});
					}else{
						uni.showToast({
							title:msg,
							icon:"error",
							duration:2000
					})
				}
			}
		}

	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
	}

	.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.avatarWrapper {
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.avatar {
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}

	.avatar .img {
		width: 100%;
		border-radius: 50%;
	}

	.form {
		padding: 0 100upx;
		margin-top: 80px;
	}

	.inputWrapper {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
		opacity: 0.9;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}

	.btnValue {
		color: white;
		width: 50%;
		height: 80upx;
		background: #55aaff;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		float: left;
		opacity: 0.9;
		font-weight: bold;
	}

	.loginReg {
		color: white;
		width: 50%;
		height: 80upx;
		background: #55aaff;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		float: left;
		opacity: 0.9;
		font-weight: bold;
	}
</style>
